<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="800px"
      @closed="resetForm('form')"
      :close-on-click-modal="false"
    >
      <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="校区名称" prop="schoolCode">
                <SchoolSelect
                  v-if="dialogVisible"
                  type="2"
                  :defaultCode="form.schoolCode"
                  @emit="setScool"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学期名称" prop="semesterCode">
                <el-select
                  v-model="form.semesterCode"
                  filterable
                  placeholder="请选择学期名称"
                  style="width: 100%"
                  @change="handleSemester"
                >
                  <el-option
                    v-for="v in semesterData"
                    :key="v.id"
                    :label="v.name"
                    :value="v.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="培训层次" prop="trainingCode">
                <el-select
                  v-model="form.trainingCode"
                  filterable
                  placeholder="请选择培训类型"
                  style="width: 100%"
                  @change="handleTraining"
                >
                  <el-option
                    v-for="v in trainingData"
                    :key="v.id"
                    :label="v.name"
                    :value="v.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年级名称" prop="gradeCode">
                <el-select
                  v-model="form.gradeCode"
                  filterable
                  placeholder="请选择年级名称"
                  style="width: 100%"
                  @change="handleGrade"
                >
                  <el-option
                    v-for="v in gradeData"
                    :key="v.id"
                    :label="v.name"
                    :value="v.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专业方向" prop="directionCode">
                <MajorTreeSelect
                  :defaultValue="form.directionCode"
                  @emit="handleMajor"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="线下教室" prop="classAddr">
                <TeachingSiteSelect
                  :defaultValue="form.classAddr"
                  @emitObj="handleClassAddr"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="班级名称" prop="classCode">
                <el-select
                  v-model="form.classCode"
                  filterable
                  placeholder="请选择班级名称"
                  style="width: 100%"
                  @change="handleClass"
                >
                  <el-option
                    v-for="v in classData"
                    :key="v.id"
                    :label="v.name"
                    :value="v.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主讲教师" prop="teacherName">
                <el-input v-model.trim="form.teacherName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开课日期" prop="courseStartDate">
                <el-date-picker
                  v-model="form.courseStartDate"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开课周" prop="courseStartWeeks">
                <el-input v-model.trim="form.courseStartWeeks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划结课周" prop="planEndWeeks">
                <el-input v-model.trim="form.planEndWeeks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="周课节次" prop="courseWeeksSection">
                <el-input v-model.trim="form.courseWeeksSection"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="总课时" prop="totalCourseHours">
                <el-input v-model.trim="form.totalCourseHours"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报名费用" prop="fees">
                <el-input v-model.trim="form.fees"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否结课">
                <el-radio-group v-model="form.isFinish">
                  <el-radio label="2">未结课</el-radio>
                  <el-radio label="1">已结课</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="custom" v-preventReClick @click="submitForm('form')"
          >提 交</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  eduTeachingAdd,
  eduTeachingUpdate,
} from '@/api/admin/teach/eduTeaching.js'
import { sysTrainingLevelQuery } from '@/api/admin/system/sysTrainingLevel'
import { tbDeptQuery } from '@/api/admin/system/unitManage.js'
import Bus from '@/utils/bus.js'
// import moment from 'moment'
export default {
  components: {
    MajorTreeSelect: () =>
      import('@/components/dataSelect/majorSelect/MajorTreeSelect'),
    SchoolSelect: () => import('@/components/dataSelect/schoolSelect'),
    TeachingSiteSelect: () =>
      import('@/components/dataSelect/teachingSiteSelect'),
  },
  data() {
    return {
      title: '新增',
      dialogVisible: false,
      addOrEdit: 1,
      checkedData: {},
      form: {
        classCode: '', //班级编码
        className: '', //班级名称
        classAddr: '', //固定教室
        directionName: '', //方向名称
        directionCode: '', //方向编码
        gradeCode: '', //年级编码
        gradeName: '', //年级名称
        isGraduate: '2', //是否已毕业：1是，2否
        majorsCode: '', //专业编码
        majorsName: '', //专业名称
        schoolCode: '', //校区编码
        schoolName: '', //校区名称
        semesterCode: '', //学期编码
        semesterName: '', //学期名称
        studentNum: '', //人数
        studentTeamCode: '', //学员队别编码
        studentTeamName: '', //学员队别名称
        teacherCode: this.$store.getters.account, //教员编码
        teacherName: this.$store.getters.username, //教员姓名
        trainingCode: '', //培训类型编码
        trainingName: '', //培训类型名称

        classroomCode: '', //教室编码
        classroomName: '', //教室名称
        courseStartDate: '', //开课日期
        courseStartWeeks: '', //开课周
        planEndWeeks: '', //计划结课周
        courseWeeksSection: '', //周课节次
        fees: '', //报名费用(单位分)
        isFinish: '2', //是否结课,是-yes;否-no
        classAlias: '', //班别
        totalCourseHours: '', //总课时
      },
      rules: {
        className: [
          { required: true, message: '请输入班级名称', trigger: 'blur' },
        ],
        teacherName: [
          { required: true, message: '请输入教员名称', trigger: 'blur' },
        ],
        classCode: [{ required: true, message: '请选择班级', trigger: 'blur' }],
        directionCode: [
          { required: true, message: '请选择专业方向', trigger: 'blur' },
        ],
        gradeCode: [{ required: true, message: '请选择年级', trigger: 'blur' }],
        schoolCode: [
          { required: true, message: '请选择校区', trigger: 'blur' },
        ],
        semesterCode: [
          { required: true, message: '请选择学期', trigger: 'blur' },
        ],
        trainingCode: [
          { required: true, message: '请选择培训类型', trigger: 'blur' },
        ],
      },
      // classData: [], //班级
      // gradeData: [], //年级
      // semesterData: [], //学期
      // majorData: [], //专业方向
      trainingData: [], //培训类型
      schoolData: [], //培训类型
    }
  },
  props: ['type', 'classData', 'gradeData', 'semesterData'],
  mounted() {
    Bus.$on('showDialogClasGradeAdd', (v) => {
      if (v) {
        this.checkedData = v
        this.handleAddOrEdit(2)
      } else {
        this.handleAddOrEdit(1)
      }
    })
    this.getTraining()
    this.getSchool()
  },
  beforeDestroy() {
    Bus.$off('showDialogClasGradeAdd')
  },
  methods: {
    //培训类型
    getTraining() {
      let obj = {
        page: 1,
        limit: 999,
      }
      sysTrainingLevelQuery(obj).then((res) => {
        this.trainingData = res.data.data
      })
    },
    //校区
    getSchool() {
      tbDeptQuery({ pId: '0' }).then((res) => {
        let { data } = res.data
        this.schoolData = data.length
          ? data[0].childList.filter((v) => v.type == 1)
          : []
      })
    },
    //显示弹窗
    handleAddOrEdit(type) {
      if (type == 2) {
        this.title = '编辑'
        for (let i in this.checkedData) {
          if (this.form.hasOwnProperty(i)) {
            this.form[i] = this.checkedData[i] || ''
          }
        }
        this.form.id = this.checkedData.id
      } else {
        this.title = '新增'
        delete this.form.id
      }
      this.addOrEdit = type
      this.dialogVisible = true
    },
    submitForm(form) {
      let { semesterName, schoolName, majorsName, teacherName, className } =
        this.form
      this.form.classAlias =
        semesterName + schoolName + majorsName + teacherName + className
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.addOrEdit == 1 ? this.add() : this.edit()
        }
      })
    },
    //新增
    add() {
      eduTeachingAdd(this.form).then((res) => {
        this.dialogVisible = false
        Bus.$emit('refreshClasGradeList')
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
    //编辑
    edit() {
      eduTeachingUpdate(this.form).then((res) => {
        this.dialogVisible = false
        Bus.$emit('refreshClasGradeList')
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
    setScool(obj) {
      let { code, name } = obj
      this.form.schoolCode = code
      this.form.schoolName = name
    },
    //选择教室
    handleClassAddr(obj) {
      if (obj) {
        let { id, building, floor, roomNumber } = obj
        this.form.classroomCode = id
        this.form.classroomName = building + floor + '层' + roomNumber
      } else {
        this.form.classroomCode = ''
        this.form.classroomName = ''
      }
    },
    //选择专业方向
    handleMajor(arr, dataList) {
      if (arr.length != 2) return
      this.form.majorsCode = arr[0]
      this.form.directionCode = arr[1]
      let obj = dataList.find((v) => v.code == arr[0])
      this.form.majorsName = obj.name
      let obj2 = obj.childList.find((v) => v.code == arr[1])
      this.form.directionName = obj2.name
    },
    //选择培训层次
    handleTraining(code) {
      let obj = this.trainingData.find((v) => v.code == code)
      this.form.trainingName = obj.name
    },
    //选择校区
    handleSemester(code) {
      let obj = this.semesterData.find((v) => v.code == code)
      this.form.semesterName = obj.name
    },
    //选择年级
    handleGrade(code) {
      let obj = this.gradeData.find((v) => v.code == code)
      this.form.gradeName = obj.name
    },
    //选择班级
    handleClass(code) {
      let obj = this.classData.find((v) => v.code == code)
      this.form.className = obj.name
    },
    //重置表单
    resetForm(form) {
      this.$refs[form].resetFields()
      for (let key in this.form) {
        if (key != 'teacherCode') this.form[key] = ''
      }
      this.form.isGraduate = '2'
      this.form.teacherCode = this.$store.getters.account
      this.form.teacherName = this.$store.getters.username
    },
  },
}
</script>